<template>
  <div class="container-page-allorder-all">
    <van-list v-model="loading" :finished="finished" :offset="500" finished-text="没有更多了" @load="onLoad">
      <itemSlotCard v-for="(temp, index) in list_order" :key="index" :text="temp.display_state | display_state">
        <div @click="routerLink('orderDetails', temp.id)">
          <itemListProduct v-for="(temp_info, index_info) in temp.goods_info" :key="index_info" :value="temp_info" />
          <div class="group-info-total">
            <div class="group-info-price">
              <div class="item-total item-total-num">共 {{ temp.goods_count }} 件商品</div>
              <div class="item-total item-total-price">合计:￥{{ temp.orders_total | saveNum }}</div>
            </div>
            <div v-if="temp.display_state != 2" class="item-btn item-btn-normal">查看详情</div>
            <div v-if="temp.display_state == 2" class="item-btn item-btn-normal">取消订单</div>
            <div v-if="temp.display_state == 2" class="item-btn item-btn-active">付款</div>
          </div>
        </div>
      </itemSlotCard>
      <img v-if="list_order.length === 0" class="item-no-order" src="@/assets/noOrder.png">
    </van-list>

  </div>
</template>

<script>
// api
import { userOrderList } from '@/api/miva'
// item
import itemSlotCard from '@/components/miva-item/item-slot-card'
import itemListProduct from '../components/item-list-product'
export default {
  components: { itemSlotCard, itemListProduct },
  filters: {
    display_state(state) {
      const obj = {
        1: '订单已取消',
        2: '订单待付款',
        3: '待发货状态',
        4: '待收货状态',
        5: '完成状态',
        6: '售后状态'
      }
      return obj[state]
    }
  },
  props: {
    pageType: {
      type: [Number, String],
      default: 1
    }
  },
  data() {
    return {
      show: true,
      loading: false,
      finished: false,
      list_order: [],
      page: 0
    }
  },
  methods: {
    async onLoad() {
      this.loading = true
      // 获取订单列表
      await this.getOrderList()
    },
    async getOrderList({ page = 1, size = 10 } = {}) {
      this.page++
      let { data = {}} = await userOrderList({
        type: this.pageType,
        page: this.page,
        size
      })
      if (!data) {
        data = { info: [] }
      }
      this.loading = false
      this.list_order = [...this.list_order, ...data.info]
      if (data.info.length === 0) {
        this.finished = true
      }
    },
    routerLink(name, id) {
      this.$router.push({ name, params: { id }})
    }
  }
}
</script>

<style lang="less">
.container-page-allorder-all {
  padding: 10px;
  position: relative;
  height: 100%;
  overflow-y: scroll;
  .group {
    &-info-total {
      padding-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      position: relative;
      &::before {
        content: "";
        width: calc(100% + 20px);
        position: absolute;
        top: 0;
        left: -10px;
        display: block;
        border-top: 1px solid #ddd;
      }
    }
    &-info-price {
      width: 50%;
      display: flex;
      justify-content: space-between;
    }
  }
  .item {
    &-total {
      width: 70px;
      white-space: nowrap;
      background-color: #fff;
    }
    &-no-order {
      width: 200px;
      position: absolute;
      top: calc(50vh - 150px);
      left: 50%;
      transform: translateX(-50%);
      pointer-events: none;
    }
    &-btn {
      width: 60px;
      padding: 5px;
      border: 1px solid;
      text-align: center;
      font-size: 12px;
      white-space: nowrap;
      border-radius: 3px;
      background-color: #fff;
    }
  }
}
</style>
